<template>
  <div>
    <!-- 子路由header -->
    <header class="flex-center-between">
      <div class="l_title">
        计薪周期:
        <span class="primary_color"> 当月1日 至 当月31日</span>
      </div>
      <a-button @click="changeSalary">保存</a-button>
    </header>
    <!-- 子路由插座 -->
    <a-layout-content class="a_layout_content">
      <a-alert class="a_alert" message="对该页面的修改将在保存后立即生效。保存后请重新核对数据，进行必要的上传或归档" banner />
      <div class="a_content">
        <a-row type="flex" class="row_item">
          <a-col :span="6">发薪日期</a-col>
          <!-- 月份 -->
          <a-select class="mr20" v-model="salary.payMonth" style="width: 200px">
            <a-select-option :value="1">当月</a-select-option>
            <a-select-option :value="2">次月</a-select-option>
          </a-select>
          <!-- 日 -->
          <a-select v-model="salary.payDate" style="width: 200px">
            <a-select-option v-for="item in day" :key="item.ley" :value="item.key">
              {{ item.value }}
            </a-select-option>
          </a-select>
        </a-row>
        <a-row type="flex" class="row_item">
          <a-col :span="6">对应社保自然月</a-col>
          <!-- 对应社保自然月 -->
          <a-select v-model="salary.socMonth" style="width: 200px">
            <a-select-option :value="1">上月</a-select-option>
            <a-select-option :value="2">当月</a-select-option>
            <a-select-option :value="3">次月</a-select-option>
          </a-select>
        </a-row>
        <a-row type="flex" class="row_item">
          <a-col :span="6">社保数据来源</a-col>
          <!-- 社保数据来源 -->
          <a-select v-model="salary.socDataSource" style="width: 200px">
            <a-select-option :value="1">社保模块</a-select-option>
            <a-select-option :value="2">不计算社保</a-select-option>
          </a-select>
        </a-row>
        <a-row type="flex" class="row_item">
          <a-col :span="6">考勤数据来源</a-col>
          <!-- 考勤数据来源 -->
          <a-select class="mr20" v-model="salary.attendanceDataSource" style="width: 200px">
            <a-select-option :value="1">考勤模块</a-select-option>
            <a-select-option :value="2">自主上传</a-select-option>
          </a-select>
          <!-- 考勤数据来源 -->
          <a-select v-if="salary.attendanceDataSource === 1" v-model="salary.attendanceModuleItem" :defaultValue="1" style="width: 200px">
            <a-select-option :value="1"> 按调薪前后工资加权值计算请假扣款 </a-select-option>
            <a-select-option :value="2"> 按调薪前后实际日薪计算请假扣款 </a-select-option>
          </a-select>
        </a-row>
        <a-row type="flex" class="row_item">
          <a-col :span="6">离职员工减员</a-col>
          <!-- 离职员工减员 -->
          <a-select v-model="salary.leaveDownsizing" style="width: 200px">
            <a-select-option :value="1">自动减员</a-select-option>
            <a-select-option :value="2">员工离职时选择减员月</a-select-option>
          </a-select>
        </a-row>
      </div>
    </a-layout-content>
  </div>
</template>

<script>
import { Wages, WagesSet } from "@/api/wages";
export default {
  inject: ["reload"],
  name: "SalarySet",

  data() {
    return {
      /* 计薪设置 */
      salary: {
        companyId: this.$store.state.hr.companyId,
        attendanceModuleItem: 1,
        attendanceDataSource: 1 /* 	考勤数据来源（1：考勤模块，2：自主上传） */,
        id: "",
        leaveDownsizing: 1 /* 离职员工减员（1：自动减员，2：员工离职时选择减员月） */,
        payDate: 21 /* 发薪日期 */,
        payMonth: 1 /* 发薪月份（1：当月，2：次月） */,
        socDataSource: 1 /* 社保数据来源（1：社保模块，2：不计算社保） */,
        socMonth: 2 /* 对应社保自然月（1：上月，2：当月，3：次月） */
      }
    };
  },
  created() {
    /* 获取计薪设置 */
    this.getSatary();
  },

  watch: {
    salary: {
      handler(val) {},
      deep: true
    }
  },
  computed: {
    day() {
      const box = [];
      let i = 1;
      while (i < 32) {
        box.push({ key: i, value: `${i}日` });
        i++;
      }
      return box;
    }
  },
  methods: {
    // 下拉选择
    handleChange(value) {},
    /* 获取计薪设置 */
    getSatary() {
      Wages({ url: WagesSet.getSalary }).then(({ data }) => {
        if (data) this.salary = data;
      });
    },
    /* 修改或新增计薪设置  /* 保存 */
    changeSalary() {
      this.salary.companyId = this.$store.state.hr.companyId;
      if (Boolean(this.salary.id)) {
        Wages({
          url: WagesSet.changeSalary,
          method: "PUT",
          data: this.salary
        }).then((data) => {
          if (data.success) {
            this.$notification["success"]({ message: "保存成功" });
          }
        });
      } else {
        Wages({
          url: WagesSet.changeSalary,
          method: "PUT",
          data: this.salary
        }).then((data) => {
          if (data.success) {
            this.$notification["success"]({ message: "修改成功" });
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.a_layout_content {
  .a_alert {
    font-size: 14px;
    color: #525059;
    font-family: PingFangSC-Regular, PingFang SC;
    background: rgba(252, 175, 79, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(252, 175, 79, 0.5);
  }
  .a_content {
    margin-top: 10px;
    .row_item {
      padding: 10px 0;
    }
  }
}
</style>
